
<template>
  <h1>vue3.0钩子函数</h1>
  <div>姓名：{{ user.name }}</div>
  <div>年龄：{{ user.age }}</div>
</template>

<script>
import { defineComponent,onBeforeMount,onMounted } from "vue";
export default defineComponent({
  name: "HelloWorld",
  beforeCreate(){
    console.log("创建前的钩子函数");
  },
  created(){
    console.log("创建后的钩子函数");
  },
  beforeMount(){
    console.log("挂载前的钩子函数");
  },
  mounted(){
    console.log("挂载后的钩子函数");
  },
  onBeforeMount(){
    console.log("vue3.0挂载前");
  },
  onMounted(){
    console.log('vue3.0挂载后');
  },
  setup(props,context){
    console.log("setup，composition API执行的入口");
    //vue3.0 的钩子函数写在setup中，钩子函数前面需要加 on, 写法 钩子函数名(()=>{})
    onBeforeMount(()=>{
    console.log("vue3.0挂载前");
    });
    onMounted(()=>{
    console.log('vue3.0挂载后');
    })
  },
});
</script>

<style></style>
